<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
		<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mutong.css" />
		<title>业务概况-废家电</title>
		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
		<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/baseConfig.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		/*.weui-picker__group{
			display: none !important;	
		}*/
	</style>

	<body>

		<div class="container">
			<div class='headTime'>
				<div class='leftdate'>
					<!--<input id='datetime-picker'  bindchange="bindDateChange" >-->
					<image src='../../img/date.png' class='dateImg' />
					<span class="dataName">2019</span>
					<!--</input>-->
				</div>
				<div class='rightdate'>
					<div>
						<span class='year ' data-name='year'>年</span>
						<span class='month' data-name='month'>月</span>
						<span class='day active' data-name='day'>日</span>
					</div>
				</div>
			</div>
			<div class='navTop'>
				<div class='navLeft' >
					<span>采购入库</span>
				</div>
				<div class='navRight'>
					<span>拆解生产</span>
				</div>
			</div>
			<div id="mychart-dom-line"></div>
			<nav style="height: 47%;" class='name-list'>
				<!--<div class='item-warp' wx:for="{{list}}" wx:for-item="item" wx:for-index='idx'>
					<div class='name-warp' bindtap='btnWarp' data-nav='{{idx}}'>
						<image src='../../img/rightimg.png' class='rightImg' />
						<span class='name'>电视机</span>
						<span class='number'>10台</span>
					</div>
					<div wx:for="{{item.fcpList}}" wx:for-item="childitem" wx:for-index='childIndex' hidden='{{!item.flag}}'>
						<div class='name-second' bindtap='childBtnclick' data-nav='{{idx}}' data-childindex='{{childIndex}}'>
							<image src='../../img/rightimg.png' class='rightImg' />
							<span class='name'>电冰箱</span>
							<span class='number'>20台</span>
						</div>
						<div class='name-child' wx:if="{{childitem.fcpList.length>=1&&childitem.flag}}" wx:for="{{childitem.fcpList}}" wx:for-item="thirdItem">
							<div class='child-namewarp'>
								<span class='child-name'>电脑</span>
								<span class='child-number'>30台</span>
							</div>
						</div>
					</div>
				</div>-->
			</nav>
			<div class='navbottom'>
				<div class='addsupplier'>
					<span class='name'>新增供应商</span>
					<span class='num'>0位</span>
				</div>
				<div class='addpurchase'>
					<span class='name'>新增采购合同</span>
					<span class='num'>0份</span>
				</div>
				<div class='addputin'>
					<span class='name'>产物入库</span>
					<span class='num'>0吨</span>
				</div>
			</div>
	</body>

	<script type="text/javascript">
		$(document).ready(function() {
			var date = baseConfig.GetQueryString("date")
			//创建一个全局对象
			var fn = {
				data: getNowTime('day'), //默认时间
				dataName: 'day', //定义默认选择日期
				PicId: echarts.init(document.getElementById('mychart-dom-line')), //获取饼图echarts实例
				//				addsupplier:`0位`,  //新增供应商
				//				addpurchase:`0份`,   //新增采购合同
				//				addputin:`0吨`,      //产物入库
				yearClick: function() { //点击年切换时间
					this.data = getNowTime().slice(0, 4)
					$(".dataName").html(fn.data)
					this.getOneOption(getNowTime('year'), '当年入库')
					this.getFooterdata(getNowTime('year'))
				},
				monthClick: function() { //点击日切换时间
					this.data = getNowTime().slice(0, 7)
					$(".dataName").html(fn.data)
					this.getOneOption(getNowTime('month'), '当月入库')
					this.getFooterdata(getNowTime('month'))
				},
				dayClick: function() { //点击日切换
					this.data = getNowTime()
					$(".dataName").html(fn.data)
					this.getOneOption(getNowTime('day'), '当日入库')
					this.getFooterdata(getNowTime('day'))
				},
				/*饼图封装*/
				getPieChart: (name1, num1, name2, num2, list1, list2, listName) => {
					return {
						legend: { //图例组件
							//right:100,  //图例组件离右边的距离
							orient: 'horizontal', //布局  纵向布局 图例标记居文字的左边 vertical则反之
							//图行例组件的宽度,默认自适应
							x: '5%', //图例显示在右边
							y: '70%', //图例在垂直方向上面显示居中
							itemWidth: 10, //图例标记的图形宽度
							itemHeight: 10, //图例标记的图形高度
							data: listName,
							textStyle: { //图例文字的样式
								color: '#fff', //文字颜色
								fontSize: 12, //文字大小
								lineHeight: 12
							}
						},
						graphic: [{
								type: 'text',
								z: 100,
								left: '19%',
								top: '35%',
								style: {
									x: 3,
									y: 10,
									fill: '#fff',
									text: [
										name1,
										num1,
									].join('\n'),
									font: 'bolder 12px "Microsoft YaHei", sans-serif',
									textAlign: 'center', //3、居中显示
								}
							},
							{
								type: 'text',
								z: 100,
								left: '69%',
								top: '35%',
								style: {
									x: 3,
									y: 10,
									fill: '#fff',
									text: [
										name2,
										num2,
									].join('\n'),
									font: 'bolder 12px "Microsoft YaHei", sans-serif',
									textAlign: 'center', //3、居中显示
								}
							}
						],
						 color: ['#48cda6', '#fd87ab','#98FB98','#7FFFD4','#7FFF00'], //手动设置每个图例的颜色
						series: [ //系列列表
							{
								name: '', //系列名称
								type: 'pie', //类型 pie表示饼图
								center: ['25%', '40%'], //设置饼的原心坐标 不设置就会默认在中心的位置
								radius: ['40%', '50%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
								itemStyle: { //图形样式
									normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
										label: { //饼图图形上的文本标签
											show: false //平常不显示
										},
										labelLine: { //标签的视觉引导线样式
											show: false //平常不显示
										}
									},
								},
								data: list1
							},
							{
								name: '', //系列名称
								type: 'pie', //类型 pie表示饼图
								center: ['75%', '40%'], //设置饼的原心坐标 不设置就会默认在中心的位置
								radius: ['40%', '50%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
								itemStyle: { //图形样式
									normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
										label: { //饼图图形上的文本标签
											show: false //平常不显示
										},
										labelLine: { //标签的视觉引导线样式
											show: false //平常不显示
										}
									},
								},
								data: list2
							}
						]
					}
				},
				/*查询渲染的函数*/
				getOneOption: (time, name) => { //这一步其实就要给图表加上数据
					$.ajax({
						type: "get",
						url: baseConfig.localHttp +'weChat/small/fcpEnter', //你请求数据的接口地址
						data: {
							time: time
						},
						success: function(res) {
//							console.log(res)
							var num1 = res.content.enterCount
							var num2 = res.content.totalEnterCount
							var list = res.content.enterList
							var totallist = res.content.totalEnterList
							var list1 = []
							var list2 = []
							var listName = []
							for(var i = 0; i < list.length; i++) {
								var obj = {
									name: list[i].goodsName,
									value: list[i].count
								}
								list1.push(obj)
							}
							for(var j = 0; j < totallist.length; j++) {
								var obj2 = {
									name: totallist[j].goodsName,
									value: totallist[j].count
								}
								listName.push(totallist[j].goodsName)
								list2.push(obj2)
							}
							//我这里就假设res.xdata和res.ydata是我们需要的数据，即在x轴和y轴展示的数据，记住一定是数组哦！
							fn.PicId.setOption(fn.getPieChart(name, num1, '累计库存', num2, list1, list2, listName))
						}
					})
				},
				//获取底部数据
				getFooterdata: (time) => {
					$.ajax({
						type: "get",
						url: baseConfig.localHttp +'weChat/small/fcpEnter', //你请求数据的接口地址
						data: {
							time: time
						},
						success: (res) => {
							var data = res.content.enterList
							console.log(res)
							var nav = "";
							for(var i = 0; i < data.length; i++) {
								 
									if(data[i].fcpList.length==0){
										nav += `<div class='item-warp'>
									          <div class='name-warp' data-flag='right'>								            
									            <span class='name'>${data[i].goodsName}</span>
									            <span class='number'>${data[i].count}台</span>
									          </div>`
									}else{
										nav += `<div class='item-warp'>
									          <div class='name-warp' data-flag='right'>
									            <image src='../../img/rightImg.png'  class='rightImg'/>
									            <span class='name'>${data[i].goodsName}</span>
									            <span class='number'>${data[i].count}台</span>
									          </div>`	
										for(var j = 0; j < data[i].fcpList.length; j++) {
											
											if(data[i].fcpList[j].fcpList.length==0){
													nav += 	`<div class='name-second' data-flag='right'>											  
											              <span class='name'>${data[i].fcpList[j].goodsName}</span>
											              <span class='number'>${data[i].fcpList[j].count}台</span>`		
											}else{
												nav += 	`<div class='name-second' data-flag='right'>
											              <image src='../../img/rightImg.png' class='rightImg'/>
											              <span class='name'>${data[i].fcpList[j].goodsName}</span>
											              <span class='number'>${data[i].fcpList[j].count}台</span>`		
												for(var k = 0; k < data[i].fcpList[j].fcpList.length; k++) {
													nav += `<div class='child-warp'>
											              <div class='name-child'>
												                <div class='child-namewarp'>
												                  <span class='child-name'>${data[i].fcpList[j].fcpList[k].goodsName}</span>
												                  <span class='child-number'>${data[i].fcpList[j].fcpList[k].count}台</span>
												                </div> 
												                </div>
														    </div>`														          														      
												}
											}	
											nav += `</div>`
										}
									}
									nav += `</div>`
							}
							$(".name-list").html(nav)
							$(".name-warp").on("click",function(){
								var flag = $(this).attr("data-flag")
								if(flag=='right'){
									flag = 'down'
									$(this).children(".rightImg").attr("src","../../img/downImg.png")
									$(this).siblings(".name-second").css("display","block")
									$(this).attr("data-flag","down")
								}else{
									flag = 'right'
									$(this).children(".rightImg").attr("src","../../img/rightImg.png")
									$(this).siblings(".name-second").css("display","none")
									$(this).attr("data-flag","right")
								}							
							})
							$(".name-second").on("click",function(){
								var flag = $(this).attr("data-flag")
								if(flag=='right'){
									flag = 'down'
									$(this).children(".rightImg").attr("src","../../img/downImg.png")
									$(this).children(".child-warp").css("display","block")
									$(this).attr("data-flag","down")
								}else{
									flag = 'right'
									$(this).children(".rightImg").attr("src","../../img/rightImg.png")
									$(this).children(".child-warp").css("display","none")
									$(this).attr("data-flag","right")
								}
							})
						}
					})
					$.ajax({
						type: "get",
						url: baseConfig.localHttp +'weChat/small/footerInfo', //你请求数据的接口地址
						data: {
							time: time
						},
						success: (res) => {
							var data = res.content
//							console.log(res)
							$(".addsupplier .num").html(`${data.clientCount}位`)
							$(".addpurchase .num").html(`${data.contractCount}份`)
							$(".addputin .num").html(`${data.productWeight}吨`)
						}
					})
				},

				//获取物料数据
				//			   getmaterielData:()=>{
				//			   	
				//			   }
			}
//			fn.getOneOption(2019, "当年入库")
//			fn.getOneOption(getNowTime('day'), '当日入库')
//			fn.getFooterdata(getNowTime('day'))
//			$(".dataName").html(fn.data)
			$(".rightdate span").on('click', function() {
				$(this).addClass("active").siblings().removeClass("active")
				fn.dataName = $(this).attr("data-name")
				if(fn.dataName == "year") {
					fn.yearClick()
				} else if(fn.dataName == "month") {
					fn.monthClick()
				} else {
					fn.dayClick()
				}
			})

			$('.dateImg').on('click', function() {
				var dt = new Date();
                var df= [dt.getFullYear(), (dt.getMonth() + 1), dt.getDate()];
				weui.datePicker({
					start: 2018,
					end: 2020,
					defaultValue: df,
					className: 'time',
					onChange: (result) => {
						var year = document.querySelectorAll(".weui-picker__group")[0]
						var month = document.querySelectorAll(".weui-picker__group")[1]
						var day = document.querySelectorAll(".weui-picker__group")[2]
						if(fn.dataName == "year") {
							year.style.setProperty('display', 'block', 'important');
							month.style.setProperty('display', 'none', 'important');
							day.style.setProperty('display', 'none', 'important');
						} else if(fn.dataName == "month") {
							year.style.setProperty('display', 'block', 'important');
							month.style.setProperty('display', 'block', 'important');
							day.style.setProperty('display', 'none', 'important');
						} else {
							year.style.setProperty('display', 'block', 'important');
							month.style.setProperty('display', 'block', 'important');
							day.style.setProperty('display', 'block', 'important');
						}
					},
					onConfirm: (result) => {
						console.log(result)
						if(fn.dataName == "year") {
							fn.data = result[0].value
							fn.getOneOption(fn.data,'当年入库')
							fn.getFooterdata(fn.data)
						} else if(fn.dataName == "month") {
							if(result[1].value<10){
								fn.data = `${result[0].value}-0${result[1].value}`
							}else{
								fn.data = `${result[0].value}-${result[1].value}`
							}						
							fn.getOneOption(fn.data,'当月入库')
							fn.getFooterdata(fn.data)
						} else {
							if(result[1].value<10 && result[2].value<10){
								fn.data = `${result[0].value}-0${result[1].value}-0${result[2].value}`
							}else if(result[1].value<10 && result[2].value>10){
								fn.data = `${result[0].value}-0${result[1].value}-${result[2].value}`
							}else if(result[1].value>10 && result[2].value<10){
								fn.data = `${result[0].value}-${result[1].value}-0${result[2].value}`
							}else{
								fn.data = `${result[0].value}-${result[1].value}-${result[2].value}`
							}
							fn.getOneOption(fn.data,'当日入库')
							fn.getFooterdata(fn.data)
						}
						$(".dataName").html(fn.data)
					},
					id: 'datePicker'
				});

			});
			if(!date){
//				fn.getOneOption(2019, "当年入库")				
				fn.getOneOption(getNowTime('day'), '当日入库')
				fn.getFooterdata(getNowTime('day'))
				$(".dataName").html(fn.data)
			}else{			
				fn.getFooterdata(date)
				$(".dataName").html(date)
				if(date.length==4){
					fn.dataName = 'year'
					$(".rightdate").find(".year").addClass("active").siblings().removeClass("active")
					fn.getOneOption(date,"当年入库")
				}else if(date.length==7){
					fn.dataName = 'month'
					$(".rightdate").find(".month").addClass("active").siblings().removeClass("active")
					fn.getOneOption(date,"当月入库")
				}else{
					fn.dataName = 'day'
					$(".rightdate").find(".day").addClass("active").siblings().removeClass("active")
					fn.getOneOption(date,"当日入库")
				}
			}
			$(".navRight").click(function(){
				location.href = "second.html?date="+$(".dataName").html()
			})
			//获取当前年月日时间封装
			function getNowTime(date) {
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var day = now.getDate();
				if(month < 10) {
					month = '0' + month;
				};
				if(day < 10) {
					day = '0' + day;
				};
				var formatDate = year;
				var formatMonth = year + '-' + month;
				var formatDay = year + '-' + month + '-' + day;
				if(date == 'year') {
					return formatDate;
				} else if(date == 'month') {
					return formatMonth
				} else {
					return formatDay
				}
			}
			//

		})
	</script>

</html>